import React, { useContext, useEffect, useRef } from "react";
import './index.component.css';
import SubComponent from "./sub/sub.component";
import { GLOBAL } from "../../app.component";
import { InnerMqClient } from "../../rx/client/inner-mq.client";
import { Topic } from "../../rx/topic";

const IndexComponent: React.FC = () => {

	const global = useContext(GLOBAL);
	const client = useRef<InnerMqClient>();

	useEffect(() => {
		client.current = global.innerMqService.createClient();
		client.current.sub(Topic.MY_TP_1, (res) => {
			console.log(res);
		});
		return () => {
			client.current && global.innerMqService.destroyClient(client.current);
		};
	}, []);

	return (
		<div className="container-index">
			<div className="name-index">
				index component
			</div>
			<div className="comp-sub">
				<SubComponent></SubComponent>
			</div>
		</div>
	);
}

export default IndexComponent;
